import PropTypes from "prop-types";
import React from "react";

const DemoOne = function (props) {
    let { title, className, children } = props;
    children = React.Children.toArray(children);
    let headerSlot = [],
        footSlot = [],
        defaultSlot = []
    children.forEach(item => {
        const { slot } = item.props;
        if (slot === 'header') {
            headerSlot.push(item)
        } else if (slot === 'foot') {
            footSlot.push(item)
        } else {
            defaultSlot.push(item)
        }
    })
    return <div className={`demo-box ${className}`}>
        {headerSlot}
        {title}
        {defaultSlot}
        <br />
        {footSlot}
    </div>
}
DemoOne.defaultProps = {
    title: '',
    x: 0
}
DemoOne.propTypes = {
    title: PropTypes.string.isRequired,
    x: PropTypes.number
}
export default DemoOne;